<template>
    <!--绩效统计 电销员-->
    <div class="content_panel project_modules">
        <div class="content_panel project_modules">
            <div class="content_panel project_modules">
                <div class="content_panel_top">
                    <h3 class="panel_title">
                        <span>{{$t('salesManage.salesman')}}</span>
                    </h3>
                    <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                        <el-row>
                            <el-col :span="5">
                                <!-- 批次号 -->
                                <el-form-item prop="batchCode"><!--批次号-->
                                    <el-input v-model="form.batchCode" :placeholder="$t('salesManage.batchNumber')" class="input-text" clearable></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item prop="startEnd"><!--统计时间-->
                                    <el-date-picker
                                            v-model="form.startEnd"
                                            type="datetimerange"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="timestamp"
                                            style="width: 100%;"
                                            :range-separator="'—'"
                                            :start-placeholder="$t('salesManage.statisticsStartTime')"
                                            :end-placeholder="$t('salesManage.statisticsEndTime')"
                                            :picker-options="pickerEndOpt"
                                            :default-time="['00:00:00', '23:59:59']" clearable>
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-button @click="onSearch" type="primary">{{ $t('common.search') }}</el-button>
                                <el-button type="primary" class="search_panel_btn" @click="exportExcel" icon="search"><i class="el-icon-download"></i>{{ $t('common.export') }}</el-button>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>

        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <div class="toolbar">
                        <div>
                            <span class="mgr-20" v-if="balance.startDateTimeMillis!==''">{{ $t('salesManage.statisticsTime') }} : {{ balance.startDateTimeMillis | formatDate('yyyy-MM-dd hh:mm:ss') }} -- {{ balance.endDateTimeMillis | formatDate('yyyy-MM-dd hh:mm:ss') }}</span><span v-if="balance.batchCode!==''">{{ $t('salesManage.batchNumber') }} : {{ balance.batchCode }}</span>
                        </div>
                    </div>

                    <el-table ref="table" :data="tableData" :max-height="tableMaxHeight" class="table">
                        <el-table-column prop="userName" :label="$t('salesManage.salesman')">
                            <template slot-scope="scope">{{ scope.row.userName}}</template>
                        </el-table-column><!--电销员-->
                        <!-- 分派数 -->
                        <el-table-column prop="distributionNum" :label="$t('salesManage.assignmentsNumber')"></el-table-column>
                        <!-- 拨打数 -->
                        <el-table-column prop="callNum" :label="$t('salesManage.callsNumber')"></el-table-column>
                        <!-- 接通数 -->
                        <el-table-column prop="putCallNum" :label="$t('salesManage.connectionsNumber')"></el-table-column>
                        <!-- 接通率 -->
                        <el-table-column prop="putCallRate" :label="$t('salesManage.rateConnection')">
                            <template slot-scope="scope">{{ scope.row.putCallRate}}%</template>
                        </el-table-column>
                        <!-- 申请数 -->
                        <el-table-column prop="applyNum" :label="$t('salesManage.applicationsNumber')"></el-table-column>
                        <!-- 申请率 -->
                        <el-table-column prop="applyRate" :label="$t('salesManage.rateApplication')">
                            <template slot-scope="scope">{{ scope.row.applyRate }}%</template>
                        </el-table-column>
                        <!-- 放款数 -->
                        <el-table-column prop="loanNum"  :label="$t('salesManage.loansNumber')"></el-table-column>
                        <!-- 放款率 -->
                        <el-table-column prop="loanRate"  :label="$t('salesManage.rateLoan')">
                            <template slot-scope="scope">{{ scope.row.loanRate }}%</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import storage from '@/libs/storage';
    import {apiConf} from '@/config/index';
    import urlType from '@/api/url-type';
    import urlUtils from '@/libs/urlutils';

    let that = null;
    export default {
        name: 'telemarketing-performance-telemarketer',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                balance: {
                    batchCode: '',
                    startDateTimeMillis: '',
                    endDateTimeMillis: '',
                },
                form: {
                    batchCode: '',
                    // startDate: '',
                    // endDate: '',
                    startEnd: [],
                },
                rules: {},
                tableData: [],
                updateTime: '',
                claimsAmount: '',
            };
        },
        computed: {
            pickerEndOpt() {
                if (this.form.startEnd && this.form.startEnd.length === 2) {
                    this.form.startEnd[1] > Date.now() ? this.form.startEnd[1] = Date.now() : '';
                    if (this.form.startEnd[0] > this.form.startEnd[1]) {
                        this.form.startEnd[0] = new Date().setHours(0, 0, 0, 0);
                    }
                }
            },
            showSearch() {
                this.$nextTick(() => {
                    this.$refs.form.clearValidate();
                });
                return this.$store.state.app.search.show;
            },
        },
        created() {
            that = this;
            this.tableMaxHeight = window.document.body.clientHeight - 250;
            // this.getTableData();
        },
        methods: {
            getSummaries(param) {
                const {columns, data} = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = this.$t('salesManage.total');
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            }
                            return prev;
                        }, 0);
                        if (index === 4 || index === 6 || index === 8) {
                            sums[index] += ' %';
                        } else {
                            sums[index] += '';
                        }
                    } else {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            },
            onSearch() {
                const form = this.form;
                if (!form.batchCode && (!form.startEnd || form.startEnd.length <= 0)) {
                    this.$message.error(this.$t("verify.plsCheckFilters"));
                    return;
                }
                this.page.currentPage = 1;
                this.getTableData();
            },
            onEmpty() {
                this.$refs.form.resetFields();
            },
            getTableData(page = this.page) {
                const form = this.form;
                const params = {
                    batchCode: '',
                    startDate: '',
                    endDate: '',
                    // startEnd: [],
                    // page: {
                    //   pageNo: page.currentPage,
                    //   pageSize: this.page.pageSize
                    // }
                };
                // if (form) {
                Object.keys(params).forEach((key) => {
                    if (form[key]) {
                        params[key] = form[key];
                    }
                });
                // }
                if (this.form.startEnd && this.form.startEnd.length) {
                    params.startDate = this.form.startEnd[0];
                    params.endDate = this.form.startEnd[1];
                }
                this.$api.telSales.getPerformanceAppraisalStatistics(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.tableData = data;
                        // this.setPage(data.page);
                        this.balance.batchCode = params.batchCode;
                        this.balance.startDateTimeMillis = params.startDate;
                        this.balance.endDateTimeMillis = params.endDate;
                    } else {
                        this.tableData = [];
                        this.balance.batchCode = '';
                        this.balance.startDateTimeMillis = '';
                        this.balance.endDateTimeMillis = '';
                    }
                });
            },
            exportExcel() {
                const form = this.form;
                if (!form.batchCode && (!form.startEnd || form.startEnd.length <= 0)) {
                    this.$message.error(this.$t("verify.plsCheckFilters"));
                    return;
                }
                const params = {
                    batchCode: '',
                    startDateTimeMillis: '',
                    endDateTimeMillis: '',
                };
                Object.keys(params).forEach((key) => {
                    if (form[key]) {
                        params[key] = form[key];
                    }
                });
                if (form.startEnd && form.startEnd.length) {
                    params.startDateTimeMillis = form.startEnd[0];
                    params.endDateTimeMillis = form.startEnd[1];
                }
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.token = user.token;
                params.language = language;
                params.Authorization = 'Basic cGluamFtYW5nbzpwaW5qYW1hbmdvMDE4';
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.telSales.exportPerformanceAppraisalStatistics, []);
                this.$openNewBlank(url);
            },
        },
    };
</script>

<style lang="scss" scoped>
    .table_list {
        .toolbar {
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .mgr-20 {
                margin: 0 30px 0 0;
            }
        }
        .table {
            width: 100%;
        }
    }
</style>
<style lang="scss">
    [data-page=telemarketing-performance-telemarketer] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-button {
            margin-bottom: 18px
        }
        .el-table__row {
            .el-button {
                margin-bottom: 0px
            }
        }
    }
</style>
